<template>
	<view class="mx-vip-card-detail">
		<view class="card-img" :style="{backgroundImage: `url(${cardImg})`}">
			<view class="is-valid">
				<view v-if="isValid" class="valid-card">
					有效
				</view>
				<view v-else class="invalid-card">
					已失效
				</view>
			</view>
		</view>
		<view class="card-price">￥ {{info.price}}</view>
		<view class="card-info">
			<text class="info-title">{{info.card_name}} </text>
			<text class="info-detail">{{info.introduce}}</text>
		</view>
		<view class="card-info">
			<text class="info-title">购买时间</text>
			<text class="info-detail">{{info.pay_date}}</text>
		</view>
		<view class="card-info">
			<text class="info-title">有效期</text>
			<text class="info-detail">{{info.effective}}天</text>
		</view>
		<!-- 当 type 为 1 时，为有限次数卡 -->
		<view v-if="info.type == 1" class="card-info">
			<text class="info-title">有效次数</text>
			<text class="info-detail">{{info.limite}}次</text>
		</view>
		<view class="card-info">
			<text class="info-title">剩余有效期</text>
			<text class="info-detail">{{info.remaining_day}}天</text>
		</view>
		<!-- 当 type 为 1 时，为有限次数卡 -->
		<view v-if="info.type == 1" class="card-info">
			<text class="info-title">剩余有效次数</text>
			<text class="info-detail">{{info.remaining_times}}次</text>
		</view>
		<view class="card-info">
			<text class="info-title">使用规则</text>
			<text class="info-detail">{{info.use_rules}}</text>
		</view>

		<view :class="['check-btn', isValid ? '': 'is-invalid']" @tap="onTap">
			{{btnText}}
		</view>
	</view>
</template>

<script>
	import {
		imgUrl
	} from '@/utils/config.js'
	import * as membercardApi from '@/api/membercard.js'
	export default {
		name: "MxCheckCardInfo",
		props: {
			info: {
				type: Object
			},

			image: {
				type: String
			},
			
			// 二维码token
			token: {
				type: String
			}
		},
		computed: {
			cardImg() {
				if (this.image) {
					return imgUrl + this.image
				}
			},

			isValid() {
				const {
					type,
					remaining_day,
					remaining_times
				} = this.info
				if (remaining_day > 0) {
					if (type == 0) {
						return true
					}

					if (type == 1) {
						if (remaining_times > 0) {
							return true
						}
					}
				}

				return false
			},
			
			btnText() {
				return this.isValid ? '确认进场': '该会员卡已失效'
			}
		},
		
		methods: {
			onTap() {
				if(!this.isValid) {
					return
				}
				const orderId = this.info.order_id
				membercardApi.useCard({orderId, token: this.token}).then(res => {
					console.log(res)
					this.$emit('change', res.data)
					this.$success(res.message, () => {
						uni.navigateTo({
							url: '/pages/mine/use-card-success'
						})
					})
				}).catch(err => {
					this.$error(err.errMsg)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/scss/var.scss';
	@import '@/common/scss/mixins.scss';

	.mx-vip-card-detail {
		width: 700rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-family: $font-family;

		.card-img {
			position: relative;
			margin-top: 72rpx;
			width: 700rpx;
			height: 408rpx;
			@include bg-img-cover;

			.is-valid {
				position: absolute;
				right: 26rpx;
				bottom: 32rpx;
				font-size: 20px;
				font-weight: 600;
				letter-spacing: 4px;
				color: #FE552D;

				.invalid-card {
					color: #2C405A;
				}
			}
		}

		.card-price {
			margin-top: 42rpx;
			box-sizing: border-box;
			padding-left: 18rpx;
			width: 100%;
			color: $color-amount;
			font-weight: bold;
			font-size: 18px;
		}

		.card-info {
			margin-top: 60rpx;
			width: 100%;
			box-sizing: border-box;
			padding-left: 18rpx;
			display: flex;
			flex-direction: column;

			.info-title {
				font-weight: bold;
				font-size: 18px;
			}

			.info-detail {
				margin-top: 20rpx;
				font-size: 16px;
			}

			&:nth-child(3) {
				margin-top: 20rpx;
			}
		}

		.check-btn {
			width: 100%;
			height: 86rpx;
			margin-top: 70rpx;
			background: linear-gradient(0deg, #3250FA, #826EF0);
			text-align: center;
			line-height: 86rpx;
			color: #fff;
			border-radius: 80rpx;
			box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
			letter-spacing: 5rpx;
			
			&.is-invalid{
				background: #2C405A;
			}
		}
	}
</style>
